<template>
	<!--头部搜索部分-->
	<div>
		<header1></header1>
		<div class="big-top">
			<!--左侧logo-->
			<div class="dao">
				<router-link to='/'>
					<img src="../../imgs/grzx/logo.png" />
				</router-link>
			</div>
			<!--中间搜索-->
			<div class="soubig">
				<div class="sou">
					<input type="text" placeholder="请输入关键字进行搜索" />
					<img src="../../imgs/fangdajing9.png" />

				</div>
				<div class="remen">
					<span> 热门：</span>
					<a href="#/">奇异果</a>

					<a href="#/">牛排</a>
					<a href="#/">山竹</a>
					<a href="#/">牛油果</a>

				</div>
			</div>
			<!--个人中心-->
			<div class="youce">

				<div class="geren">
					<span><img src="../../imgs/gerenzhongxin.png"/></span>
					<span>个人中心</span>
				</div>
				<div class="gowu">
					<span><img src="../../imgs/grzx/gouwuche.png"/></span>
					<span>购物车</span>

				</div>

			</div>

		</div>

		
	</div>
</template>

<script>
	import header1 from '@/components/top/header1'
	export default {
		name: 'index',
		components: {
			header1
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	.big-top {
		position: relative;
		/*border: 1px solid red;*/
		margin: 0 auto;

		width:1280px;
		height: 130px;
	}
	
	.dao img {
		width: 370px;
		height: 67px;
		position: absolute;
		top: 25px;
		left:0px;
	}
	
	.soubig {
		position: relative;
		top: 49px;
		left: 472px;
	
		width: 498px;
		height: 57px;
		float: left;
		/*border: 1px solid gainsboro;*/
	}
	
	.sou {
		width: 498px;
		height: 40px;
	}
	
	.sou input {
		outline: none;
		border: 2px solid #4b943d;
		padding: 10px 297px 9px 10px;
		font-size: 14px;
		color: #c2c2c2;
		float: left;
	}
	
	.sou img {
		background-color: #4b943d;
		padding: 10px;
		cursor: pointer;
	}
	
	.remen {
		position: absolute;
		top: 10px;
		width: 498px;
		height: 14px;
		font-size: 14px;
		margin-top: 0px;
	}
	
	.remen span {
		color: #666666;
	}
	
	.remen a {
		margin-right: 12px;
		width: 274px;
		height: 14px;
		font-size: 14px;
		line-height: 80px;
		color: #666666;
		text-decoration: none;
	}
	
	.youce {
		position: relative;
		top: 50px;
		left: 1010px;
	}
	
	.geren {
		width: 125px;
		height: 40px;
		border: solid 1px #e5e5e5;
		background: #e5e5e5;
	}
	
	.geren img {
		margin: -45px 0 12px 21px;
		width: 16px;
		height: 16px;
		float: left;
	}
	
	.geren span:nth-child(2) {
		/*background: aqua;*/
		position: absolute;
		top: 14px;
		left: 47px;
		width: 57px;
		height: 12px;
		font-size: 14px;
		line-height: 14px;
		color: #666666;
	}
	
	.gowu {
		width: 125px;
		height: 40px;
		border: solid 1px #e5e5e5;
		background: #e5e5e5;
		;
		margin: -41px 140px;
	}
	
	.gowu img {
		margin: -45px 0 12px 27px;
		/*background: aqua;*/
		width: 18px;
		height: 16px;
		float: left;
	}
	
	.gowu span:nth-child(2) {
		position: absolute;
		top: 14px;
		left: 197px;
		width: 57px;
		height: 12px;
		font-size: 14px;
		line-height: 14px;
		color: #666666;
	}
</style>